<template>
  <el-dialog :visible.sync="visible" v-dialogDrag :title="title" :close-on-click-modal="false" class="tl-dialog" width="1000px" @open="open" @close="close" :append-to-body="true" :modal-append-to-body="true">
    <el-form class="tl-form" ref="form" :model="model" :rules="rules" label-width="120px" :disabled="disableEditSubmit">
      <el-tabs v-model="activeTab" type="card" @tab-click="tabClick" class="tl-tabs">
        <el-tab-pane label="基础信息" name="basic">
          <el-row>
            <el-col :span="12">
              <el-form-item label="名称" prop="name" :rules="rules.validateRequire">
                <el-input v-model="model.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="位置" prop="location" :rules="this.meetRoomType === 'company' ? rules.validateRequire : []" v-show="this.meetRoomType === 'company'">
                <el-select v-model="model.location" filterable clearable>
                  <el-option v-for="item in codeModel.locationList" :key="item.code" :label="item.name" :value="item.code" />
                </el-select>
              </el-form-item>
              <el-form-item label="位置" prop="locationdesc" :rules="this.meetRoomType === 'dept' ? rules.validateRequire : []" v-show="this.meetRoomType === 'dept'">
                <el-input v-model="model.locationdesc"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="职能部门" prop="deptcodename" :rules="rules.validateRequire">
                <tl-ref-dept v-model="model.deptcode" :initDisplayData.sync="model.deptcodename" nameType="fullname" dataType="code" :singleSelect="true"></tl-ref-dept>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="负责人" prop="username" :rules="rules.validateRequire">
                <tl-ref-user v-model="model.usercode" :initDisplayData.sync="model.username" @confirm="selectUser" dataType="code" :singleSelect="true" :externalQueryParam="{qry_whereSql:'EXTENDFIELD1 IS NOT NULL AND ENABLED = 1',qry_nodimission:'0'}" ></tl-ref-user>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="联系电话" prop="telephone" :rules="rules.validateRequire">
                <el-input v-model="model.telephone"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="会议室性能" prop="performance">
                <el-input v-model="model.performance"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="会议室容量" prop="capacity" :rules="rules.validateRequire.concat(rules.validateIntGteZero)">
                <el-input v-model="model.capacity" placeholder="可承载人数">
                  <template slot="append">
                    人
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="会议室面积" prop="square" :rules="rules.validateIntGteZero">
                <el-input v-model="model.square">
                  <template slot="append">
                    平米
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-show="this.meetRoomType === 'dept'">
            <el-col :span="24">
              <el-form-item label="可用部门" prop="availabledeptname" :rules="this.meetRoomType === 'dept' ? rules.validateRequire : []">
                <tl-ref-dept v-model="model.availabledeptcode" :initDisplayData.sync="model.availabledeptname" nameType="fullname" dataType="code" :singleSelect="false"></tl-ref-dept>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="配套资源" prop="resourcelist">
                <el-select v-model="selectedResourcelist" filterable clearable multiple>
                  <el-option v-for="item in codeModel.resourceList" :key="item.code" :label="item.name" :value="item.code" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="备注" prop="description">
                <el-input v-model="model.description" type="textarea" :rows="4"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="排序码" prop="sortcode">
                <el-input-number v-model="model.sortcode" controls-position="right" :step="1" :min="0" style="width:100%"></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="有效" prop="enabled">
                <el-radio-group v-model="model.enabled">
                  <el-radio :label="parseInt(item.code)" v-for="item in codeModel.enabledList" :key="item.code">{{ item.name }}</el-radio>
                </el-radio-group>
                <tl-help>
                  若会议室因装修等原因暂时无法对外开放，请选择无效；可正常使用后，请及时更新为有效。
                </tl-help>
              </el-form-item>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="会议室图片" name="picture" v-if="model.id">
          <upload-comp ref="attachment" sourceType="meetRoom" :sourceId="parseInt(model.id)" limitType="jpg;png" :limitSize="102400" :editable="model.editable"></upload-comp>
        </el-tab-pane>
      </el-tabs>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button :type="disableEditSubmit === false ? 'text' : 'primary'" @click="doCancelEdit">取消</el-button>
      <el-button type="primary" @click="doSubmitEdit" :loading="saveLoading" v-if="disableEditSubmit === false">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
/** mixins */
import { mixin_edit } from '@tapui/mixins/mixin_edit'
/** 子组件 */
import uploadComp from "../meetRecord/uploadComp"
/** 工具类 */
import { putAction, getAction, postAction, deleteAction } from '@tapui/utils/http'
/** VUE配置 */
export default {
  mixins: [mixin_edit],
  components: { uploadComp },
  data() {
    return {
      moduleTitle: '会议室',
      urlPrefix: '/meet/roomManage/',
      url: {
        // 额外的url
      },
      selectedResourcelist: [],
      activeTab: 'basic'
    }
  },
  props: {
    meetRoomType: {
      type: String,
      default: 'company'
    }
  },
  methods: {
    selectUser(users) {
      let user = users[0]
      if (user.mobile) {
        this.$set(this.model, "telephone", user.mobile)
      }
    },
    loaded() {
      // 页面加载完毕执行
      if (this.model.resourcelist) {
        this.selectedResourcelist = this.model.resourcelist.split(',')
      } else {
        this.selectedResourcelist = []
      }
      if (this.model.capacity <= 0) this.model.capacity = ''
      if (this.model.square <= 0) this.model.square = ''
      this.activeTab = 'basic'
    },
    // 提交前赋默认值
    beforeSubmit() {
      this.$set(this.model, 'state', '0')
      this.$set(this.model, 'type', this.meetRoomType)
      this.$set(this.model, 'resourcelist', this.selectedResourcelist.join(','))
      if (this.meetRoomType === 'company') {
        let locationName = ''
        this.codeModel.locationList.forEach(item => {
          if (item.code === this.model.location) {
            locationName = item.name
          }
        })
        this.$set(this.model, 'locationdesc', locationName)
      }
      return true
    },
    tabClick(tab) {
      if (tab.name === 'picture') {
        this.$nextTick(_ => {
          this.$refs.attachment.loadData({})
        })
      }
    }
  }
}
</script>
